<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/4</title>
    <!--<script src="./node_modules/_vue@2.5.17@vue/dist/vue.min.js"></script>-->
    <script src="node_modules/_vue@2.5.17@vue/dist/vue.min.js"></script>
    <script src="node_modules/Mock/dist/mock-min.js"></script>
    <link rel="stylesheet" href="./index2.css">
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
 <div id="root" v-cloak>
     <app-list :foo="index"></app-list>
     <app-footer @index="fn"></app-footer>
     <!--<div v-once>{{msg}}</div>-->
     <!--<div v-text="htmlTag"></div>-->
     <!--<input type="text" v-model="username" >-->
     <!--<div>{{username}}</div>-->
     <!--<button @click = 'fn'>提交</button>-->
     <!--<h1 v-if="isLogIn">请登录</h1>-->
     <!--<h1 v-else="isLogIn">登录成功</h1>-->
     <!--&lt;!&ndash;给html标签的属性绑定数据 v-bind&ndash;&gt;-->
     <!--<a :href="href" :style="{background: 'red', color:'#fff' }" :class="[{test:!isActive},{[d]:isActive}]" id="">{{hrefname}}</a>-->
     <!--&lt;!&ndash;<img :src="./a.jpg" :alt="">&ndash;&gt;-->

     <!--<div @click = "alert(123)" style="background:orangered;width:300px;height:300px">-->
         <!--<div @click.stop.self = "alert(234)" style="width:50px;height:50px;background:aqua">-->
             <!--<a href="https://www.baidu.com" @click.prevent.stop="alert('……')">百度</a>  &lt;!&ndash;阻止默认行为&ndash;&gt;-->
         <!--</div>-->
     <!--</div>-->
     <!--<input v-model.lazy="ipt" type="text">-->
     <!--<h1>{{ipt}}</h1>-->
     <!--<input type="text" @keyup.ctrl.alt.meta.enter = "alert('f1')">-->
     <!--meta键是键盘上的window键-->
     <!--
     meta键是键盘上的window键
     修饰符
     self       阻止冒泡
     prevent    阻止默认行为
     stop       阻止单击事件继续传播   阻止默认事件
     capture
     lazy
     number     将字符串转换为数字
     trim
     <!--防止页面"闪烁" v-show='!!userData.length'-->
 </div>
 <!--<script>-->
     <!--// Vue.config.keyCodes.f1 = 112;-->
     <!--// let app = new Vue({-->
         <!--// data:{-->
         <!--//     msg:'hello,world!',-->
         <!--//     htmlTag:'<h2>123234325436</h2>',-->
         <!--//     username:'',-->
         <!--//     isLogIn:false,-->
         <!--//     href:'https://www.baidu.com',-->
         <!--//     hrefname:'baidu',-->
         <!--//     isActive:true,-->
         <!--//     d:'active',-->
         <!--//     ipt: '',-->
         <!--// },-->
         <!--// methods:{-->
         <!--//     // fn(){-->
         <!--//     //     console.log(this.username);-->
         <!--//     // },-->
         <!--//     // select(key){-->
         <!--//     //     this.selectedKey = key;-->
         <!--//     //     // let selectedFns = {-->
         <!--//     //     //     // 0:() => this.userData = this.userData.filter(value => value.gender),-->
         <!--//     //     //     // 1:() => this.userData = this.userData.filter(value => !value.gender),-->
         <!--//     //     //     // 2:() => this.userData = this.userData.filter(value => value.age <20),-->
         <!--//     //     //     // 3:() => this.userData = this.userData.filter(value =>/^1[3458]/.test(value.phoneNumber)),-->
         <!--//     //     //     '-1':() => true,-->
         <!--//     //     //     0:value => value.gender,-->
         <!--//     //     //     1:value => !value.gender,-->
         <!--//     //     //     2:value => value.age <20,-->
         <!--//     //     //     3:value =>/^1[3458]/.test(value.phoneNumber),-->
         <!--//     //     // };-->
         <!--//     //     //-->
         <!--//     // }-->
         <!--// },-->
         <!--// computed:{-->
         <!--//     filterUser:function(){-->
         <!--//         let selectedFns = {-->
         <!--//                 '-1':() => true,-->
         <!--//                 0:value => value.gender,-->
         <!--//                 1:value => !value.gender,-->
         <!--//                 2:value => value.age <20,-->
         <!--//                 3:value =>/^1[3458]/.test(value.phoneNumber),-->
         <!--//             };-->
         <!--//         return this.userData.filter(selectedFns[this.selectedKey]);-->
         <!--//     }-->
                 <!--// if(this.selectedKey === 0){-->
                 <!--//     return this.userData.filter(value => value.gender)-->
                 <!--// }-->
                 <!--// if(this.selectedKey === 1){-->
                 <!--//     return this.userData.filter(value => !value.gender)-->
                 <!--// }-->
                 <!--// if(this.selectedKey === 2){-->
                 <!--//     return this.userData.filter(value =>value.age < 20)-->
                 <!--// }-->
                 <!--// if(this.selectedKey === 3){-->
                 <!--//     return this.userData.filter(value =>/^1[3458]/.test(value.phoneNumber))-->
                 <!--// }-->
             <!--// }-->
         <!--// },-->
     <!--// });-->
 <!--</script>-->
</body>
<script type="x-template" id="app-list">
    <ul v-show='!!userData.length' class="user-list">
        <li class="user-item">
            <span>姓名</span>
            <span>性别</span>
            <span>年龄</span>
            <span>电话</span>
            <span>操作</span>
        </li>
            <li v-for="(item,index) in filterUser" class="user-item">
                <span>{{item.name}}</span>
                <span>{{item.gender|toGender}}</span>
                <span>{{item.age}}</span>
                <span>{{item.phoneNumber}}</span>
                <span @click ="clickToDel(index)">删除</span>
            </li>
    </ul>
</script>
<script src="app-list.js"></script>
<script type="x-template" id="app-footer">
    <ul class="ft-bar">
        <li v-for="(item,key) in ftBar" @click="select(key)" :class="{active: key === selectedKey}">{{item}}</li>
    </ul>
</script>
<script src="app-footer.js"></script>
<script src="app1.js"></script>
</html>
